import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { RecommendWrapper, RecommendItem } from '../style';
import * as actionCreators from '../store/actionCreators';

const Recommend = () => {
  const dispatch = useDispatch();
  const recommendList = useSelector((state:any) => state.getIn(['home', 'recommendList']));

  // 代表初始化执行的操作
  useEffect(() => {
    dispatch(actionCreators.initFetchRecommendList('烟台'));
  }, []);

  return (
    <RecommendWrapper>
      {
        recommendList.map((item:any) => (
          <RecommendItem key={item.getIn(['date'])}>
            {item.getIn(['weather'])}
          </RecommendItem>
        ))
      }
    </RecommendWrapper>
  );
};

export default Recommend;
